<template>
  <div :class="classes" v-clickoutside="handleClose">
    <div ref="reference" @click="toggleVisible" :class="wrapClasses">
      <input type="hidden" :name="name" :value="currentValue" />
      <i :class="dropdownClass"></i>
      <div :class="inputClasses">
        <div :class="[prefixCls + '-color']">
          <div :class="[prefixCls + '-color-empty']" v-show="value === '' && !visible">
            <i :class="emptyClass"></i>
          </div>
          <div v-show="value || visible" :style="{backgroundColor: displayedColor}"></div>
        </div>
      </div>
    </div>
    <transition name="transition-drop">
      <Drop
        v-show="visible"
        @click.native="handleTransferClick"
        :class="{ [prefixCls + '-transfer']: transfer }"
        :class-name="dropMaxHeightClass"
        :placement="placement"
        ref="drop"
        :data-transfer="transfer"
        v-transfer-dom>
        <div :class="[prefixCls + '-picker']">
          <div :class="[prefixCls + '-picker-wrapper']">
            <div :class="[prefixCls + '-picker-panel']">
              <Saturation v-model="saturationColors" @change="childChange" />
            </div>
            <div v-if="hue" :class="[prefixCls + '-picker-hue-slider']">
              <Hue v-model="saturationColors" @change="childChange" />
            </div>
            <div v-if="alpha" :class="[prefixCls + '-picker-alpha-slider']">
              <Alpha v-model="saturationColors" @change="childChange" />
            </div>
            <recommend-colors
              v-if="colors.length"
              :list="colors"
              :class="[prefixCls + '-picker-colors']"
              @picker-color="handleSelectColor" />
            <recommend-colors
              v-if="!colors.length && recommend"
              :list="recommendedColor"
              :class="[prefixCls + '-picker-colors']"
              @picker-color="handleSelectColor" />
          </div>
          <div :class="[prefixCls + '-confirm']">
            <span :class="[prefixCls + '-confirm-color']">{{ formatColor }}</span>
            <Confirm @on-pick-success="handleSuccess" @on-pick-clear="handleClear" />
          </div>
        </div>
      </Drop>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
